<script setup>
import {infoStore} from '@/store/index.js'
import {storeToRefs} from "pinia";
import {onMounted, ref, watch} from "vue";
import MusicDetail from "@/components/MusicDetail.vue";

const store = infoStore()
let {playListInfo, playListIndex, btnShow, detailShow} = storeToRefs(store)
const {updateBtnShow, updateDetailShow, getLyric, updateCurrentTime, updateDuration} = store

const audio = ref()


function play() {
    if (audio.value.paused) {
        audio.value.play()
        // console.log(audio.value)
        updateBtnShow(false)
    } else {
        audio.value.pause()
        updateBtnShow(true)
    }
}

const updateTime = function () {
    updateCurrentTime(audio.value.currentTime)
}

const changeDuration = function () {
    updateDuration(audio.value.duration)
}

onMounted(() => {
    getLyric(playListInfo.value[playListIndex.value].id)
})

watch([playListIndex, playListInfo], () => {
    getLyric(playListInfo.value[playListIndex.value].id)
    audio.value.autoplay = true
    // changeDuration()
    updateBtnShow(false)
})
</script>

<template>
    <div class="footerBar">
        <div class="footerLeft" @click="updateDetailShow">
            <img :src="playListInfo[playListIndex].al.picUrl" alt="" class="musicImg"/>
            <div class="font">
                <p class="musicName">{{ playListInfo[playListIndex].name }}</p>
                <span class="description">横滑切换歌曲</span>
            </div>
        </div>
        <div class="footerRight">
            <svg v-show="btnShow" aria-hidden="true" class="icon" @click="play">
                <use xlink:href="#icon-bofang1"></use>
            </svg>
            <svg v-show="!btnShow" aria-hidden="true" class="icon" @click="play">
                <use xlink:href="#icon-zanting"></use>
            </svg>
            <svg aria-hidden="true" class="icon">
                <use xlink:href="#icon-zu"></use>
            </svg>
        </div>
    </div>
    <audio ref="audio" :audio="audio"
           :src="`https://music.163.com/song/media/outer/url?id=${playListInfo[playListIndex].id}.mp3`" @durationchange="changeDuration" @timeupdate="updateTime"/>

    <van-popup v-if="playListInfo[playListIndex]" v-model:show="detailShow" :style="{ height: '100%',width:'100%' }"
               position="bottom">
        <MusicDetail :btnShow="btnShow" :play="play" :playInfo="playListInfo[playListIndex]"/>
    </van-popup>
</template>

<style lang="less" scoped>
@whiteColor: #F5F5F7;
.footerBar {
    width: 100%;
    height: 1rem;
    background-color: @whiteColor;
    position: fixed;
    bottom: 0;
    border-top: 1px solid #999;
    display: flex;
    padding: 0.1rem;
    justify-content: space-between;

    .footerLeft {
        width: 60%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;

        .musicImg {
            position: absolute;
            left: 0.1rem;
            width: .8rem;
            height: .8rem;
            border-radius: 50%;
        }

        .font {
            position: absolute;
            left: .95rem;

            .musicName {
                font-weight: 600;
                line-height: 0.46rem;
            }

            .description {
                font-size: 0.26rem;
                color: #bbb;
            }
        }
    }

    .footerRight {
        width: 30%;
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .icon {
            width: .6rem;
            height: .6rem;
        }
    }
}

</style>